import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, OnInit, Renderer2 } from '@angular/core';
// import { RobotRenderer } from '@shared/core/renderer/robot';


@Component({
  selector: 'app-periodictable-container',
  template: `<ng-content></ng-content>`,
})
export class PeriodictableContainerComponent implements OnInit, AfterViewInit {
//   private robotRenderer = new RobotRenderer()

  constructor(
    private rd: Renderer2,
    private elementRef: ElementRef,
  ) {}

  @HostBinding('style.display') display = 'block';
  @HostBinding('style.width.vw') width = 100;
  @HostBinding('style.height.vh') height = 100;

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    // this.robotRenderer.onMouseDown(event);
  }
  @HostListener('mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    // this.robotRenderer.onMouseMove(event);
  }
  @HostListener('mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    // this.robotRenderer.onMouseUp(event);
  }
  @HostListener('mousewheel', ['$event'])
  onMouseWheel(event: WheelEvent) {
    console.warn(12313)
    // this.robotRenderer.onMouseWheel(event);
  }
  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    console.warn(313)
    // this.robotRenderer.onWindowResize();
  }
  @HostListener('document.body.keydown', ['$event'])
  onKeyup() {
    console.warn(12312)
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.initScence();
  }

  initScence() {
    // const renderer = this.robotRenderer.init(this.elementRef)
    // this.rd.appendChild(this.elementRef.nativeElement, renderer.domElement)
    // this.robotRenderer.animate()
  }

}

